<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>请假申请</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .container {
      text-align: center;
      background: rgba(255, 255, 255, 0.9);
      padding: 40px 60px;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .title {
      font-size: 28px;
      margin-bottom: 30px;
      color: #333;
      font-weight: 600;
    }
    
    .button-group {
      display: flex;
      gap: 20px;
      justify-content: center;
    }
    
    .btn {
      padding: 12px 30px;
      font-size: 18px;
      font-weight: 600;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .btn-approve {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white;
    }
    
    .btn-reject {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
      color: white;
    }
    
    /* 通用弹窗样式 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    
    .modal.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    .modal-content {
      background: white;
      padding: 40px;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      transform: scale(0.8) translateY(50px);
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      max-width: 90%;
      width: 500px;
    }
    
    .modal.active .modal-content {
      transform: scale(1) translateY(0);
    }
    
    .modal-title {
      font-size: 24px;
      margin-bottom: 15px;
      color: #333;
    }
    
    .emoji {
      font-size: 60px;
      margin: 20px 0;
    }
    
    .modal-btn-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 30px;
    }
    
    .modal-btn {
      padding: 10px 25px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .modal-btn-confirm {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white;
    }
    
    .modal-btn-cancel {
      background: #eee;
      color: #666;
    }
    
    /* 弹窗动画效果 */
    .shake {
      animation: shake 0.5s ease-in-out;
    }
    
    .float {
      animation: float 3s ease-in-out infinite;
    }
    
    .pulse {
      animation: pulse 2s ease-in-out infinite;
    }
    
    .spin {
      animation: spin 3s linear infinite;
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title">学生请假申请</h1>
    <div class="button-group">
      <button class="btn btn-approve" id="approveBtn">同意</button>
      <button class="btn btn-reject" id="rejectBtn">不同意</button>
    </div>
  </div>

  <!-- 拒绝弹窗 -->
  <div class="modal" id="rejectModal">
    <div class="modal-content">
      <div class="emoji">😭</div>
      <h2 class="modal-title">真的不同意吗？</h2>
      <p>学生可能真的有特殊情况，再考虑一下吧～</p>
      <div class="modal-btn-group">
        <button class="modal-btn modal-btn-confirm" id="rejectToApproveBtn">改为同意</button>
        <button class="modal-btn modal-btn-cancel" id="closeRejectModalBtn">还是不同意</button>
      </div>
    </div>
  </div>

  <!-- 同意弹窗 -->
  <div class="modal" id="approveModal">
    <div class="modal-content">
      <div class="emoji">😊</div>
      <h2 class="modal-title">请假已批准！</h2>
      <p>祝贺你～记得处理好个人事务，按时返校哦～</p>
      <div class="modal-btn-group">
        <button class="modal-btn modal-btn-confirm" id="closeApproveModalBtn">确定</button>
      </div>
    </div>
  </div>

  <script>
    // 元素获取
    const approveBtn = document.getElementById('approveBtn');
    const rejectBtn = document.getElementById('rejectBtn');
    const rejectModal = document.getElementById('rejectModal');
    const approveModal = document.getElementById('approveModal');
    const closeRejectModalBtn = document.getElementById('closeRejectModalBtn');
    const rejectToApproveBtn = document.getElementById('rejectToApproveBtn');
    const closeApproveModalBtn = document.getElementById('closeApproveModalBtn');
    
    // 动画相关变量
    let lastAnimation = '';
    const animations = ['shake', 'float', 'pulse', 'spin'];
    
    // 获取不重复的随机动画
    function getRandomAnimation() {
      let newAnimation;
      do {
        newAnimation = animations[Math.floor(Math.random() * animations.length)];
      } while (newAnimation === lastAnimation);
      lastAnimation = newAnimation;
      return newAnimation;
    }
    
    // 显示弹窗（通用方法）
    function showModal(modal) {
      const modalContent = modal.querySelector('.modal-content');
      // 移除旧动画，添加新动画
      modalContent.classList.remove(...animations);
      setTimeout(() => modalContent.classList.add(getRandomAnimation()), 10);
      modal.classList.add('active');
    }
    
    // 关闭弹窗（通用方法）
    function closeModal(modal) {
      modal.classList.remove('active');
    }
    
    // 点击「同意」- 显示祝贺弹窗
    approveBtn.addEventListener('click', () => {
      showModal(approveModal);
    });
    
    // 点击「不同意」- 显示确认弹窗
    rejectBtn.addEventListener('click', () => {
      showModal(rejectModal);
    });
    
    // 关闭拒绝弹窗（点击「还是不同意」）
    closeRejectModalBtn.addEventListener('click', () => {
      closeModal(rejectModal);
    });
    
    // 拒绝弹窗转同意（点击「改为同意」）
    rejectToApproveBtn.addEventListener('click', () => {
      closeModal(rejectModal);
      setTimeout(() => showModal(approveModal), 300);
    });
    
    // 关闭同意弹窗（点击「确定」）
    closeApproveModalBtn.addEventListener('click', () => {
      closeModal(approveModal);
    });
    
    // 点击弹窗背景关闭弹窗
    [rejectModal, approveModal].forEach(modal => {
      modal.addEventListener('click', (e) => {
        if (e.target === modal) closeModal(modal);
      });
    });
  </script>
</body>
</html>
